<template>
  <section class="mr-bottom-20">
    <a-page-header
      :title="$route.meta.title"
      :sub-title="$route.meta.subTitle"
      :style="{ padding: '14px 24px 16px 24px' }"
    >
      <template #extra>
          <slot name="extra"></slot>
      </template>
    </a-page-header>

    <a-card hoverable :bordered="false">
      <slot name="search"></slot>
      <div class="h20" v-if="hasSearch"></div>
      <slot name="container"></slot>
    </a-card>
  </section>
</template>

<script>
import { PageHeader, Card } from "ant-design-vue";
export default {
  name: "UIContainer",
  components: {
    APageHeader: PageHeader,
    ACard: Card,
  },
  props: {
      hasSearch: {
          type: Boolean,
          default: () => {
              return true;
          }
      }
  }
};
</script>

<style lang="less" scoped>
</style>